<template>
  <section>

    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column label="Job ID" prop="id">
        <template scope="scope">
          <router-link :to="{path:`/page333` , query:{application_id:query.application_id,job_id:`${scope.row.id}`,state:'RUNNING'} }">
            {{scope.row.id}}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="Name" prop="name"></el-table-column>
      <el-table-column label="State" prop="state"></el-table-column>
      <el-table-column label="Map progress" prop="mapProgress"></el-table-column>
      <el-table-column label="Maps Total" prop="mapsTotal"></el-table-column>
      <el-table-column label="Maps Completed" prop="mapsCompleted"></el-table-column>
      <el-table-column label="Reduces progress" prop="reduceProgress"></el-table-column>
      <el-table-column label="Reduces Total" prop="reducesTotal"></el-table-column>
      <el-table-column label="Reduce Completed" prop="reducesCompleted"></el-table-column>
    </el-table>

  </section>
</template>


<script>
  import dao from '../../common/dao'
  import util from '../../common/util'
  export default {
    components: {},
    data() {
      return {
        listLoading: false,
        tableData: [],
        query: {},
      }
    },
    methods: {
      handleSelectionChange(){
      },
      getData(){
        let application_id = this.query.application_id || '';
        dao.getApplicationJobInfo({application_id}).then(res => {
          if (res.FX.err) return false;
          let results = res.body.results || {}
          if (results.state != "RUNNING") {
            this.$router.push({path: '/page333', query: {application_id: application_id}});
            return false
          }
          this.tableData = results.job || []
        })
      },
    },
    mounted: function () {
      this.query = this.$store.state.route.query || {};
      this.getData();
    }
  }
</script>

<style scoped>

</style>